<template lang="">
    <div class="swipper" ref="swipper">
        <img @click="move" class="swipper-item" src="@/assets/images/partners/audiojungle-light-background.png" alt="">
        <img class="swipper-item" src="@/assets/images/partners/activeden-light-background.png" alt="">
        <img class="swipper-item" src="@/assets/images/partners/themeforest-light-background.png" alt="">
        <img class="swipper-item" src="@/assets/images/partners/codecanyon-light-background.png" alt="">
        <img class="swipper-item" src="@/assets/images/partners/photodune-light-background.png" alt="">
    </div>
</template>
<script>

</script>
<script>
    export default {
        data() {
            return {

            }
        },
        mounted() {
            let swipper = this.$refs.swipper
            console.log("mounted");
        },
        methods: {
            move() {
                let swipper = this.$refs.swipper
                swipper.innerHTML +=  swipper.innerHTML
                let left = 0
                setInterval(() => {
                    left -= 20
                    swipper.style.left = left + "px"
                }, 100)
            }
        },
    }
</script>
<style lang="less" scoped>
    @import url('@/assets/less/swipper.less');
</style>